<?php
$posts = $args['posts'] ?? [];
empty($posts) && $posts = get_random_posts($args['pagesize'] ?? 8);

?>
<div class='ctxtpost1'>
    <section class="txtpost1">
        <?php
        foreach ($posts as $item) {
        ?>
            <a class="grid" href="<?= $item['link'] ?>" title="<?= $item['title'] ?>">
                <h3 class="nowrap2"><?= $item['title'] ?></h3>
                <p><?= $item['excerpt'] ?></p>
                <span><?= $item['date'] ?></span>
            </a>
        <?php
        }
        ?>
    </section>
</div>

<style>
     div.ctxtpost1 {
        container-type: inline-size;
        container-name: txtpost1;
    }
    section.txtpost1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto-fit, minmax(10rem, 14rem));
        gap: var(--gap);
    }

    section.txtpost1>a {
        transition: var(--transition);
        padding: var(--gap);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
        background-color: var(--color-primary);
    }

    section.txtpost1>a:hover {
        transform: scale(1.05);
        filter: brightness(1.2);
        border: 1px solid #ffbd41;
        box-shadow: 0px 4px 6px rgb(255, 189, 65, .2);
    }

    @container txtpost1 (max-width: 1024px) {
        section.txtpost1 {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
        }
    }
    @container txtpost1 (max-width: 768px) {
        section.txtpost1 {
            grid-template-columns: auto;
            grid-template-rows: auto;
        }
    }
</style>